<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M968.366 521.554c-2.048 0-4.782 0-8.54-1.024h-.338l-9.902-2.724h-.338a36.639 36.639 0 0 1-19.794-14.336c-5.468-8.192-22.528-20.142-48.476-26.624-24.228-6.492-45.732-5.12-54.948-.348-7.168 3.758-15.36 5.12-23.9 3.42-.338 0-1.024-.348-1.362-.348l-20.142-5.12h-.338c-8.878-2.386-16.384-7.844-20.48-15.36-5.458-8.192-23.552-19.794-47.442-25.6-24.576-6.482-46.428-5.12-55.296-.338h-.348c-8.192 4.096-17.06 5.12-25.252 2.734l-19.804-5.12c-.338 0-.676 0-.676-.348a36.639 36.639 0 0 1-19.804-14.336s0-.338-.338-.338c-5.458-8.192-23.552-20.142-48.128-26.286-24.238-6.482-45.742-5.12-54.958-.338-7.168 3.758-15.698 5.12-24.228 3.41-.348 0-.686 0-1.024-.338l-20.142-5.12h-.338c-8.878-2.386-16.384-7.854-20.48-15.36-5.468-8.192-23.552-19.794-47.452-25.6-24.576-6.482-46.08-5.12-54.948-.338-7.168 3.748-15.36 5.12-23.9 3.41-.676 0-1.024-.338-1.7-.338l-9.564-2.734c-8.868-2.386-16.384-8.192-21.504-16.384 0-.338-.338-.338-.338-.686-4.782-8.868-5.806-19.108-2.386-28.324 2.386-6.83 30.72-81.92 99.328-146.432 64.164-61.102 178.176-123.904 354.98-78.172 174.428 45.056 244.06 153.262 271.36 236.206 29.02 86.702 19.456 165.202 17.408 180.224v-.338 1.024c-1.7 9.216-6.82 17.746-15.012 23.204-1.71 1.372-4.096 2.396-6.144 3.072-3.42 1.024-8.192 2.048-13.312 2.048zm-6.144-42.66 1.362.338c5.806-52.224 16.384-291.84-259.758-363.52-126.628-32.768-232.786-10.24-315.73 66.898-53.586 49.838-80.21 107.182-87.726 125.614l1.372.338c19.794-9.554 51.2-10.24 82.596-2.048 31.068 7.854 58.03 23.552 70.656 41.646l15.708 4.096c19.794-9.554 51.2-10.24 82.596-2.048 31.744 8.192 58.03 23.89 70.656 41.984l15.708 4.096c19.794-9.554 51.2-10.24 82.596-2.048 31.068 7.854 58.03 23.552 70.656 41.646l15.708 4.096c19.794-9.564 51.2-10.24 82.596-2.048 31.744 7.168 58.03 22.866 71.004 40.96z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M545.792 777.554c-1.71 0-3.41-.338-5.12-.676-10.926-2.734-17.408-13.998-14.674-24.924l88.064-339.968c2.724-10.916 13.988-17.408 24.914-14.674 10.926 2.734 17.408 13.998 14.674 24.914l-88.064 339.968a20.395 20.395 0 0 1-19.794 15.36zm176.128-660.48c-1.71 0-3.41-.338-5.12-.676-10.926-2.734-17.408-13.998-14.674-24.924l16.036-62.464c2.734-10.916 13.998-17.408 24.924-14.674 10.916 2.734 17.408 13.998 14.674 24.914l-16.046 62.464a20.395 20.395 0 0 1-19.794 15.36zm15.022 892.928c-8.192 0-16.046-5.12-19.118-13.312l-36.526-95.908H160.082c-14.674 0-27.648-8.878-32.768-22.528L32.43 634.542c-4.096-10.588 1.024-22.528 11.602-26.624s22.528 1.024 26.624 11.602l93.522 240.302h531.118c8.53 0 16.046 5.12 19.118 13.312l41.636 109.22c4.096 10.588-1.362 22.528-11.94 26.286a17.818 17.818 0 0 1-7.168 1.362z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M123.904 1010.35c-2.734 0-5.458-.348-7.854-1.71a20.173 20.173 0 0 1-10.916-26.624l45.732-109.568a20.173 20.173 0 0 1 26.624-10.926 20.173 20.173 0 0 1 10.926 26.624l-45.742 109.568c-3.072 7.854-10.916 12.636-18.77 12.636zm561.49-176.814H235.52c-13.998 0-26.624-8.53-32.43-21.504 0-.338-.338-.338-.338-.686l-54.61-137.892c-4.096-10.588 1.024-22.528 11.602-26.624s22.528 1.024 26.624 11.602l53.248 134.144h446.126c11.264 0 20.48 9.216 20.48 20.48s-9.564 20.48-20.828 20.48z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc3 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
